<template>
  <u-popup
    v-model="show"
    mode="bottom"
    border-radius="24"
    :z-index="121"
    safe-area-inset-bottom
  >
    <view class="popup-box">
      <view class="popup-title"> 选择服务时间 </view>
      <view class="popup-content">
        <!-- 滚动日期 -->
        <scroll-view
          id="scroll-x-top1"
          :scroll-left="dateScrollLeft"
          :scroll-x="true"
          scroll-with-animation
        >
          <view class="scroll-x-top1-box">
            <view
              :class="[dateCurrent == index ? 'select-top1-item' : '']"
              :id="'scroll-x-top1-item' + index"
              @click="clickDateScrollItem(index, $event)"
              v-for="(item, index) in pageData.service_book.data"
              :key="index"
            >
              {{ item.date }}
            </view>
          </view>
        </scroll-view>

        <!-- 滚动时间 -->
        <!-- <scroll-view
          id="scroll-x-top2"
          scroll-x
          :scroll-left="detailScrollLeft"
          scroll-with-animation
        >
          <view class="scroll-x-top2-box">
            <view
              :class="[detailCurrent == index ? 'select-top2-item' : '']"
              v-for="(item, index) in pageData.service_book.data[dateCurrent]
                .time"
              :key="index"
              :id="'scroll-x-top2-item' + index"
              @click="clickDetailSCrollItem(index, $event)"
            >
              {{ item.start_time }}-{{ item.end_time }}
            </view>
          </view>
        </scroll-view> -->

        <!-- 详细时间 -->
        <scroll-view scroll-y class="scroll-y-1">
          <view
            class="price-box"
            v-if="
              pageData.service_book.data && pageData.service_book.data.length
            "
          >
            <view
              v-for="(item, index) in pageData.service_book.data[dateCurrent]
                .time[detailCurrent].times"
              :key="index"
              :class="[timesClass(index, item)]"
              @click="timesChange(index, item)"
            >
              <view>
                {{ item.time }}
              </view>
              <view class="m-t-5">
                {{ item.status ? "不可预约" : "可预约" }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="close-icon" @click="show = false">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="foot-btns">
        <view class="foot-content">
          <view class="buy-btn" @click="submit">确认服务时间</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  computed: {
    // 动态类名判断选中,库存不足
    timesClass() {
      return function (index, item) {
        let newClass = ["price-item"];
        newClass.push(index == this.currentTimes ? "select-price-item" : "");
        newClass.push(item.status === 1 ? "disable-price-item" : "");
        return newClass;
      };
    },
  },

  props: {
    serveData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      dateCurrent: 0,
      dateScrollLeft: 0,
      detailCurrent: 0,
      detailScrollLeft: 0,
      currentTimes: undefined,

      show: false,
      pageData: {
        service_book: {
          data: [],
        },
      },
    };
  },

  watch: {
    serveData: {
      handler: function (val, olval) {
        this.pageData = val;
      },
      immediate: true,
      deep: true,
    },

    pageData: {
      handler: function () {
        this.$emit("pageDataChange", this.pageData);
      },
      deep: true,
    },
  },
  methods: {
    submit() {
      if (this.pageData.service_book.data.length <= 0)
        return uni.showToast({
          title: "请选择预约时间",
          icon: "none",
        });

      const dateCurrent = this.dateCurrent;
      const detailCurrent = this.detailCurrent;
      const currentTimes = this.currentTimes;

      if (currentTimes === undefined)
        return uni.showToast({
          title: "请选择预约时间",
          icon: "none",
        });

      let str = this.$utils.formatDate(
        new Date(
          this.pageData.service_book.data[dateCurrent].time[detailCurrent]
            .times[currentTimes].time_int * 1000
        )
      );

      this.show = false;
      this.$emit("submit", str);
    },

    timesChange(i, item) {
      if (item.status) {
        return uni.showToast({
          title: "不可预约",
          icon: "none",
        });
      }

      this.currentTimes = i;
    },

    // 点击日期滚动区域
    async clickDateScrollItem(index, e) {
      // 获取滚动区域宽度
      let scrollWidth = await this.getDomData("#scroll-x-top1");
      // 获取当前dom宽度
      let currentWidth = await this.getDomData("#scroll-x-top1-item" + index);

      // 计算卷入长度
      this.dateScrollLeft =
        e.target.offsetLeft + currentWidth / 2 - scrollWidth / 2;
      // 设置当前选中项
      this.dateCurrent = index;

      this.detailCurrent = 0;
      this.currentTimes = undefined;
    },

    // 点击时间详情滚动区域
    async clickDetailSCrollItem(index, e) {
      // 获取滚动区域宽度
      let scrollWidth = await this.getDomData("#scroll-x-top2");
      // 获取当前dom宽度
      let currentWidth = await this.getDomData("#scroll-x-top2-item" + index);

      // 计算卷入长度
      this.detailScrollLeft =
        e.target.offsetLeft + currentWidth / 2 - scrollWidth / 2;
      // 设置当前选中项
      this.detailCurrent = index;
      this.currentTimes = 0;
    },
    // 获取元素信息 传入类名或id
    getDomData(select) {
      return new Promise((result, rej) => {
        let query = uni.createSelectorQuery();
        query
          .in(this)
          .select(select)
          .boundingClientRect()
          .exec((res) => {
            result(res[0].width);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-box {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.8vw;
  height: 80vh;
  position: relative;
  display: flex;
  flex-direction: column;

  .popup-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    margin-left: 4.8vw;
    padding-bottom: 4.267vw;
  }

  .popup-content {
    width: 100%;
    padding: 0 4.8vw;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .shop-num {
      margin-top: 2.67vw;
      padding: 0 1.6vw;
      height: 9.86vw;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .shop-num-text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
    }
  }

  .close-icon {
    width: 14.93vw;
    height: 14.93vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-box {
      width: 5.34vw;
      height: 5.34vw;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f1f2;
      .iconfont {
        color: #8c8c8c;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }

  .foot-btns {
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 13.34vw;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 4.8vw;
      .buy-btn {
        width: 90.4vw;
        height: 10.13vw;
        border-radius: 5.065vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        background-color: #f22407;
      }
    }

    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

.popup-title > text:nth-child(1) {
  margin: 24rpx 0;
  line-height: 50rpx;
  font-size: 36rpx;
  font-weight: 600;
  color: #262626;
}

.scroll-x-top1-box,
.scroll-x-top2-box {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 28rpx;
  border-bottom: 1px solid #f2f2f2;

  > view {
    padding: 0 20rpx;
    line-height: 96rpx;

    &:nth-child(1) {
      padding-left: 0;
    }

    &:nth-last-child(1) {
      padding-right: 0;
    }
  }

  .select-top1-item {
    position: relative;
    font-weight: 600;

    &::after {
      content: " ";
      position: absolute;
      bottom: 15rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 50rpx;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #f0250e;
    }
  }

  .select-top2-item {
    position: relative;
    color: #f0250e;
  }
}

.scroll-x-top2-box {
  border: 0;
  font-size: 26rpx;

  > view {
    padding: 0 30rpx;
  }
}

.scroll-y-1 {
  // max-height: 600rpx;
  overflow-y: auto;
  flex: 1;

  .price-box {
    display: flex;
    flex-wrap: wrap;
    .price-item {
      margin-right: 23rpx;
      margin-bottom: 23rpx;
      width: 210rpx;
      height: 120rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 12rpx;
      border: 1px solid #e7e7e7;
      color: #262626;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .m-t-5 {
        margin-top: 5rpx;
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }

    .select-price-item {
      border-color: #f60313;
      background: #fcedeb;

      > view {
        color: #f60313 !important;
      }
    }

    .disable-price-item {
      border: 0;
      background: #f2f1f2;

      > view {
        color: #8c8c8c !important;
      }
    }
  }
}

.num-box > view:nth-child(1) {
  line-height: 74rpx;
  font-size: 26rpx;
  font-weight: 600;
  color: #262626;
}

.submit-box {
  height: 100rpx;
}

.submit-bt {
  width: 678rpx;
  line-height: 76rpx;
  background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
  border-radius: 120rpx;

  font-size: 26rpx;
  font-weight: 600;
  color: #ffffff;
}

#scroll-x-top1 {
  margin-bottom: 30rpx;
}
</style>
